<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue生命周期学习</title>
    <script src="../lib/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <h1>{{message}}</h1>
      <button @click="update">更新数据</button>
      <button @click="destroy">销毁组件</button>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Vue的生命周期',
      },
      methods: {
        update() {
          this.message = '我改变了数据'
        },
        destroy() {
          this.$destroy() //组件被销毁以后， 再次对组件进行任何操作都 不起作用了
          // vm.$destroy();
        },
      },
      beforeCreate: function () {
        console.group(
          '------beforeCreate 创建前状态:组件实例刚刚创建，还未进行数据观测和事件配置------'
        )
        console.log('%c%s', 'color:red', 'el     : ' + this.$el) //undefined
        console.log('%c%s', 'color:red', 'data   : ' + this.$data) //undefined
        console.log('%c%s', 'color:red', 'message: ' + this.message) //undefined
      },
      created: function () {
        console.group(
          '------created 创建完毕状态:实例已经创建完成，并且已经进行数据观测和事件配置------'
        )
        console.log('%c%s', 'color:red', 'el     : ' + this.$el) //undefined
        console.log('%c%s', 'color:red', 'data   : ' + this.$data) //已被初始化
        console.log('%c%s', 'color:red', 'message: ' + this.message) //已被初始化
      },
      beforeMount: function () {
        console.group(
          '------beforeMount挂载前状态:模板编译之前，还没挂载------'
        )
        console.log('%c%s', 'color:red', 'el     : ' + this.$el) //已被初始化
        console.log(this.$el) //模板没有渲染
        console.log('%c%s', 'color:red', 'data   : ' + this.$data) //已被初始化
        console.log('%c%s', 'color:red', 'message: ' + this.message) //已被初始化
      },
      mounted: function () {
        console.group(
          '------mounted 挂载结束状态:模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示------'
        )
        console.log('%c%s', 'color:red', 'el     : ' + this.$el) //已被初始化
        console.log(this.$el) //模板已经渲染
        console.log('%c%s', 'color:red', 'data   : ' + this.$data) //已被初始化
        console.log('%c%s', 'color:red', 'message: ' + this.message) //已被初始化
      },
      beforeUpdate: function () {
        console.group('beforeUpdate 更新前状态:组件更新之前===============》')
        console.log('%c%s', 'color:red', 'el     : ' + this.$el)
        console.log(this.$el) //还是原来的数据，新数据还没渲染
        console.log('%c%s', 'color:red', 'data   : ' + this.$data)
        console.log('%c%s', 'color:red', 'message: ' + this.message)
      },
      updated: function () {
        console.group('updated 更新完成状态:组件更新之后===============》')
        console.log('%c%s', 'color:red', 'el     : ' + this.$el)
        console.log(this.$el) //新数据已经渲染完成
        console.log('%c%s', 'color:red', 'data   : ' + this.$data)
        console.log('%c%s', 'color:red', 'message: ' + this.message)
      },
      beforeDestroy: function () {
        console.group('beforeDestroy 销毁前状态 :组件销毁之前===============》')
        console.log('%c%s', 'color:red', 'el     : ' + this.$el)
        console.log(this.$el)
        console.log('%c%s', 'color:red', 'data   : ' + this.$data)
        console.log('%c%s', 'color:red', 'message: ' + this.message)
      },
      destroyed: function () {
        console.group('destroyed 销毁完成状态:组件销毁之后===============》')
        console.log('%c%s', 'color:red', 'el     : ' + this.$el)
        console.log(this.$el)
        console.log('%c%s', 'color:red', 'data   : ' + this.$data)
        console.log('%c%s', 'color:red', 'message: ' + this.message)
      },
      activated() {
        console.log('我这个页面显示就会执行')
      },
      deactivated: function () {
        console.log('我这个页面退出的会执行')
      },
    })
  </script>
</html>
